<template>
  <div class="ml-1 mr-1 bg-[rgb(219,229,244)]" id="syncTackMain">
    <headerStatus class="headerStatusStyle" />
    <Card class="mt-1" :style="{ height: height + 'px' }">
      <Layout class="layout">
        <Layout.Header :style="headerStyle" class="headerRealtimeDisplay">
          <div style="position: relative">
            <!-- <groupSearch
              style="width: 200px; position: absolute; left: 0"
              v-show="groupSearchShow && activeKey == 1"
              @update="collapsed = !collapsed"
            /> -->
            <SchemaForm
              :style="{ paddingLeft: groupSearchShow ? '200px' : '0px' }"
            />
            <!-- <tableTopDemo style="padding-left: 200px;"/> -->
          </div>
        </Layout.Header>
        <Layout>
          <Layout.Sider
            v-show="groupSearchShow"
            :style="siderStyle"
            v-model:collapsed="collapsed"
            collapsible
            :trigger="null"
          >
            <UserGroup :Showbtn="Showbtn" @paneItemFn="paneItemFn" />
            <!-- <a-tabs v-model:activeKey="activeKey" style="padding-left: 10px">
              <a-tab-pane key="1" :tab="$t('synctask.Processgroup')">
                <sider />
              </a-tab-pane>
              <a-tab-pane key="2" :tab="$t('synctask.Taskforce')" force-render>
               
              </a-tab-pane>
            </a-tabs> -->
          </Layout.Sider>
          <Layout.Content :style="contentStyle" style="float: right">
            <tableMain
          /></Layout.Content>
        </Layout>
      </Layout>
    </Card>
    <div
      class="button-base"
      :class="{
        'button-left': groupSearchShow,
        'button-right': !groupSearchShow,
      }"
    >
      <LeftOutlined
        style="font-size: 16px"
        v-show="groupSearchShow"
        @click="groupSearchShow = false"
      />
      <RightOutlined
        style="font-size: 16px"
        v-show="!groupSearchShow"
        @click="groupSearchShow = true"
      />
    </div>
  </div>
</template>
<script setup>
import { Card, Layout } from 'ant-design-vue';
import { SchemaForm } from './components/header/index';
// import tableTopDemo from "@/components/tableTop/demo/index.vue";
import UserGroup from '@DSG/components/v3-UserGroup';
import headerStatus from './components/headerStatus/index';
import { tableMain } from './components/tableMain/index';
// import { sider, groupSearch } from './components/silderbar/index';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import { ref, provide } from 'vue';
import { useRowSelectStore } from "@/store/modules/rowSelectStore";
const rowSelectStore = useRowSelectStore();
// import { useRouter } from 'vue-router'; // 引入路由
// import { useFullScreenStore } from '@/store/modules/isFullScreen';
defineOptions({
  name: 'objectMigration'
});
const height = ref(window.innerHeight - 200);
const collapsed = ref(false);
const Showbtn = ref(false);//组织架构树，收缩按钮是否显示
provide('layoutRefs', { collapsed });
const activeKey = ref('1');
const headerStyle = {
  textAlign: 'left',
  color: '#fff',
  padding: 0,
  margin: 0,
  backgroundColor: '#fff',
  marginRight: "2px"
};
// const router = useRouter();
const contentStyle = {
  textAlign: 'center',
  // minHeight: 120,
  // lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#fff',
};
const siderStyle = {
  textAlign: 'center',
  // lineHeight: '120px',
  // color: '#fff',
  backgroundColor: '#fff',
  // overflow: 'auto',
  // height: '100vh',
  // position: 'fixed',
  // left: 0,
  // top: 0,
  // bottom: 0,
};

const paneItemFn = (val) => {
  rowSelectStore.setGid(val);
  console.log(rowSelectStore.Gid, '我是v3');

};

const groupSearchShow = ref(false)


//  接收表格删除，刷新，--更新左侧树，上方模块
import emiter from '@/plugins/bus.js';
emiter.on('updateModuleStart', () => {
  console.log(99999, '---==')
  emiter.emit('refreshLeftTreeSt');
  emiter.emit('refreshTopModuleSt');
});
//解绑emit
import { onUnmounted } from 'vue';
onUnmounted(() => {
  emiter.off('updateModuleStart');
});
</script>
<style >
.body :global(.ant-layout-sider-trigger) {
  background: "#7dbcea";
}
.trigger {
  color: "#7dbcea";
}
.layout {
  width: 104%;
  margin-left: -1.5rem;
}
.headerRealtimeDisplay {
  display: var(--headerRealtimeDisplay);
  min-height: 3rem !important;
  height: none !important;
  line-height: none !important;
}

.ant-layout-header {
  height: auto !important;
}
.headerStatusStyle {
  display: var(--headerStatusDisplay);
}
.button-base {
  width: 20px;
  height: 60px;
  background: #07070754;
  color: #fff;
  line-height: 60px;
  text-align: right;
  position: absolute;
  top: 50%;
  z-index: 10;
}
.button-left {
  left: 200px;
}
.button-right {
  left: 0px;
}
</style>
